'use client';
import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import {
  PhoneIcon,
  UserIcon,
  DocumentCheckIcon,
  CalculatorIcon,
  DocumentTextIcon,
  BanknotesIcon,
  ClipboardDocumentListIcon,
  CheckCircleIcon,
  WrenchScrewdriverIcon,
  TruckIcon,
  WrenchIcon,
  UserGroupIcon,
  ArrowSmallRightIcon,
  ArrowLongRightIcon,
  ArrowLongDownIcon,
} from '@heroicons/react/24/outline';

import ProductCarousel from '@/components/ProductCarousel';
import ProductSearch from '@/components/ProductSearch';
import HomeProductCarousel from '@/components/HomeProductCarousel';

const featuredProducts = [
  {
    name: '钢带箱',
    slug: 'steel-belt-box',
    category: 'box',
    image:
      'http://www.fqbzh.com/uploadfile/ueditor/image/202304/1681457723589c3b.jpg',
  },
  {
    name: '纸护角',
    slug: 'paper-corner',
    category: 'corner',
    image: '/images/products/p8.jpg',
  },
  {
    name: '木箱',
    slug: 'wooden-box',
    category: 'wooden-box',
    image:
      'http://www.fqbzh.com/uploadfile/ueditor/image/202304/1681464038a8a246.jpg',
  },
];

// 所有产品数据
const allProducts = [
  {
    name: '钢带箱',
    slug: 'steel-belt-box',
    image:
      '/images/products/g1.jpg',
    description:
      '采用优质实木和钢带加固，具有超强承重能力和防护性能。适用于重型设备和精密仪器的运输包装。',
    category: 'box',
  },
  {
    name: '免熏蒸木箱',
    slug: 'non-soaking-wooden-box',
    image:
      '/images/products/z1.jpg',
    description:
      '产品采用免熏蒸技术，具有超强防护性能，可承载重型设备和精密仪器。',
    category: 'box',
  },
  {
    name: '特质木板箱',
    slug: 'high-quality-wooden-box',
    image: '/images/products/t1.jpg',
    description:
      '产品采用优质木板，具有超强防护性能，可承载重型设备和精密仪器。',
    category: 'box',
  },

  // {
  //   name: '危险品木箱',
  //   slug: 'dangerous-goods-box',
  //   image: '/images/products/p2.png',
  //   description:
  //     '专门用于危险品运输的木箱，符合国际危险品运输标准，具有特殊的防护和标识要求。',
  //   category: 'box',
  // },
  {
    name: '木箱',
    slug: 'wooden-box',
    image: '/images/products/x1.jpg',
    description:
      '采用优质木材制作，具有承重能力强、防潮防霉、可回收利用等特点。适用于各类货物存储和运输。',
    category: 'wooden-box',
  },
  {
    name: '实木托盘',
    slug: 'pallet',
    image:
      '/images/products/sm1.jpg',
    description:
      '采用优质木材制作，承载力强，不易变形，可回收利用。',
    category: 'pallet',
  },
  {
    name: '木卡板',
    slug: '',
    image:
      '/images/products/k1.jpg',
    description: '采用优质纸板制作，与纸卡板配套使用，提供全方位的边角保护。',
    category: 'corner',
  },
  {
    name: '欧标托盘',
    slug: 'euro-pallet',
    image: '/images/products/om1.jpg',
    description: '采用优质纸板制作，与欧标托盘配套使用，提供全方位的边角保护。',
    category: 'corner',
  },
  {
    name: '胶合卡板',
    slug: 'plywood-pallet',
    image: '/images/products/j1.jpg',
    category: 'pallet',
    description:
      '采用优质胶合板制作，具有承重能力强、防潮防霉、可回收利用等特点。适用于各类货物存储和运输。',
  },
  // {
  //   name: '免检木箱',
  //   slug: 'inspection-free-wooden-box',
  //   image: '/images/products/p13.jpg',
  //   description: '经过特殊工艺处理，无需熏蒸，可直接出口，符合国际标准。',
  //   category: 'wooden-box',
  // },
  // {
  //   name: '出口木箱',
  //   slug: 'export-wooden-box',
  //   image: '/images/products/p14.jpg',
  //   description: '符合出口标准的木箱，采用优质木材制作，防护性能好。',
  //   category: 'wooden-box',
  // },
  // {
  //   name: '普通木箱',
  //   slug: 'standard-wooden-box',
  //   image: '/images/products/p15.jpg',
  //   description: '标准木箱包装，可根据需求定制尺寸，适用于各类货物存储和运输。',
  //   category: 'wooden-box',
  // },
  // {
  //   name: '围板木箱',
  //   slug: 'surrounding-wooden-box',
  //   image: '/images/products/p16.jpg',
  //   description: '四面围板设计，防护性能好，适合各类货物运输。',
  //   category: 'wooden-box',
  // },
];

const carouselImages = [
  {
    url: 'https://images.unsplash.com/photo-1580674285054-bed31e145f59?q=80',
    alt: '产品展示1',
  },
  {
    url: 'https://images.unsplash.com/photo-1565891741441-64926e441838?q=80',
    alt: '产品展示2',
  },
  {
    url: 'https://images.unsplash.com/photo-1587293852726-70cdb56c2866?q=80',
    alt: '产品展示3',
  },
];

const cooperationSteps = [
  { icon: UserIcon, title: '沟通需求', description: '了解客户具体需求' },
  {
    icon: ClipboardDocumentListIcon,
    title: '现场测量',
    description: '专业人员上门测量',
  },
  {
    icon: DocumentCheckIcon,
    title: '制定方案',
    description: '根据需求定制方案',
  },
  { icon: CalculatorIcon, title: '方案报价', description: '提供详细报价单' },
  {
    icon: DocumentTextIcon,
    title: '合同签订',
    description: '确认细节签订合同',
  },
  { icon: BanknotesIcon, title: '支付款项', description: '支付预付定金' },
  { icon: WrenchIcon, title: '维护生产', description: '定期维护保养' },
  { icon: TruckIcon, title: '上门送货', description: '准时送达安装' },
  {
    icon: WrenchScrewdriverIcon,
    title: '完工验收',
    description: '确认工程质量',
  },
  { icon: CheckCircleIcon, title: '支付尾款', description: '验收合格支付尾款' },
  { icon: UserGroupIcon, title: '售后服务', description: '提供完善售后保障' },
  { icon: PhoneIcon, title: '合作沟通', description: '保持沟通确认进度' },
];

export default function Home() {
  const [currentCategory, setCurrentCategory] = useState('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [displayProducts, setDisplayProducts] = useState(allProducts);

  // 获取筛选后的产品
  const getFilteredProducts = (query: string, category: string) => {
    let filtered = allProducts;

    // 应用搜索过滤
    if (query) {
      filtered = filtered.filter((product) =>
        product.name.toLowerCase().includes(query.toLowerCase())
      );
    }

    // 应用分类过滤
    if (category !== 'all') {
      filtered = filtered.filter((product) => product.category === category);
    }

    return filtered;
  };

  const handleSearch = (query: string) => {
    setSearchQuery(query);
    setDisplayProducts(getFilteredProducts(query, currentCategory));
  };

  const handleCategoryChange = (category: string) => {
    setCurrentCategory(category);
    setDisplayProducts(getFilteredProducts(searchQuery, category));
  };

  const handleScroll = (direction: 'left' | 'right') => {
    const container = document.querySelector('.products-container');
    if (container) {
      const scrollAmount = 300; // 每次滚动的距离
      const scrollPosition =
        direction === 'left'
          ? container.scrollLeft - scrollAmount
          : container.scrollLeft + scrollAmount;

      container.scrollTo({
        left: scrollPosition,
        behavior: 'smooth',
      });
    }
  };

  return (
    <div className="min-h-screen">
      {/* Hero Section with Carousel */}
      <section className="relative h-[700px]">
        <div className="absolute inset-0 bg-black/30"></div>
        <ProductCarousel images={carouselImages} />
        <div className="absolute inset-0 flex items-center">
          <div className="container mx-auto px-4">
            <div className="max-w-2xl text-white">
              <h1 className="text-4xl md:text-6xl font-bold mb-6">
                专业的包装解决方案
              </h1>
              <p className="text-xl md:text-2xl mb-8">
                富强木制品（东莞）有限公司，为您提供优质环保的包装产品
              </p>
              <Link
                href="/products"
                className="inline-block bg-white text-primary px-8 py-3 rounded-md font-semibold hover:bg-gray-100 transition-colors"
              >
                了解更多
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Products Section */}
      <section className="pt-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">产品中心</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              我们提供优质的包装制品，包括胶合卡板、异型托盘、包装箱等，满足您的各种包装需求。
            </p>
          </div>

          {/* Product Carousel */}
          <div className="mb-4">
            <HomeProductCarousel products={allProducts} />
          </div>

          {/* Product Search */}
          {/* <div className="mb-12">
            <ProductSearch onSearch={handleSearch} onCategoryChange={handleCategoryChange} />
          </div> */}

          {/* Products Grid */}
          {/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {displayProducts.map((product) => (
              <Link
                key={product.slug}
                href={`/products/${product.slug}`}
                className="group block"
              >
                <div className="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                  <div className="aspect-4/3 relative overflow-hidden bg-gray-100">
                    <Image
                      src={product.image}
                      alt={product.name}
                      fill
                      className="object-cover transform transition-transform duration-300 group-hover:scale-105"
                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    />
                  </div>
                  <div className="p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-primary transition-colors">
                      {product.name}
                    </h3>
                    <p className="text-gray-600 text-sm line-clamp-2">
                      {product.description}
                    </p>
                  </div>
                </div>
              </Link>
            ))}
          </div> */}
        </div>
      </section>

      {/* Featured Products */}
      {/* <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="section-title">特色产品</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
            {featuredProducts.map((product) => (
              <Link
                key={product.name}
                href={`/products/${product.slug}`}
                className="group"
              >
                <div className="relative h-[300px] rounded-lg overflow-hidden">
                  <Image
                    src={product.image}
                    alt={product.name}
                    fill
                    className="object-cover transition-transform duration-300 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                  <div className="absolute bottom-0 left-0 right-0 p-4">
                    <h3 className="text-white text-xl font-semibold">
                      {product.name}
                    </h3>
                    <div className="mt-2 flex items-center text-white">
                      <span>了解更多</span>
                      <ArrowLongRightIcon className="w-5 h-5 ml-2 transition-transform group-hover:translate-x-2" />
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section> */}



      {/* About Section */}
      <section className="pt-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="section-title">关于我们</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h3 className="text-2xl font-bold mb-4">
                富强木制品（东莞）有限公司
              </h3>
              <p className="text-gray-600 mb-6">
                公司成立于2003年，位于东莞市黄江镇长社区清龙路127号。我们致力于环保胶合板系列产品的设计开发与生产销售，
                拥有雄厚的资金与技术力量。
              </p>
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <div className="text-2xl font-bold text-primary">21+</div>
                  <div className="text-gray-600">行业解决方案经验</div>
                </div>
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <div className="text-2xl font-bold text-primary">1000+</div>
                  <div className="text-gray-600">长期战略合作伙伴</div>
                </div>
              </div>
            </div>
            <div className="relative h-[500px]">
              <Image
                src="https://images.unsplash.com/photo-1587293852726-70cdb56c2866?q=80"
                alt="公司简介"
                fill
                className="object-cover rounded-lg"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Cooperation Steps */}
      <section className="py-8 bg-gradient-to-b from-green-600 to-green-800 text-white">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl font-bold text-center mb-3">
            精细的合作流程
          </h2>
          <p className="text-center mb-8 text-green-100">
            更安全、更舒适、更快捷、更环保
          </p>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-x-6 gap-y-8 max-w-5xl mx-auto relative">
            {cooperationSteps.map((step, index) => {
              const Icon = step.icon;
              const isLastInRow = (index + 1) % 6 === 0;
              const isLast = index === cooperationSteps.length - 1;
              const rowIndex = Math.floor(index / 6);
              const isLastRow =
                rowIndex === Math.floor((cooperationSteps.length - 1) / 6);

              // 计算序号，第二行的序号倒序显示
              const stepNumber = rowIndex === 1 ? 12 - (index - 6) : index + 1;

              return (
                <div
                  key={index}
                  className="flex flex-col items-center text-center group relative w-full max-w-[160px] mx-auto"
                >
                  {/* 序号 */}
                  <div className="absolute -top-0.5 -left-0.5 w-4 h-4 rounded-full bg-green-500 text-white text-xs flex items-center justify-center z-20">
                    {stepNumber.toString().padStart(2, '0')}
                  </div>

                  {/* 图标 */}
                  <div className="w-12 h-12 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mb-2 group-hover:bg-opacity-30 transition-all duration-300 relative z-10">
                    <Icon className="w-6 h-6 text-white" />
                  </div>

                  {/* 文字内容 */}
                  <h3 className="text-sm font-semibold mb-1 text-center">
                    {step.title}
                  </h3>

                  {/* 右箭头 */}
                  {!isLastInRow && (
                    <div className="hidden lg:block absolute left-[calc(100%+0.25rem)] top-6 w-4 h-0.5 bg-green-400"></div>
                  )}

                  {/* 向下箭头 */}
                  {!isLastRow && isLastInRow && (
                    <div className="hidden lg:flex flex-col items-center absolute -bottom-6 left-1/2 -translate-x-1/2">
                      <div className="w-0.5 h-4 bg-green-400"></div>
                      <div className="w-1.5 h-1.5 border-r-2 border-b-2 border-green-400 rotate-45 -mb-0.5"></div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Contact CTA */}
      <section className="py-16 bg-primary text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">需要专业的包装解决方案？</h2>
          <p className="text-xl mb-8">我们随时为您提供专业的咨询服务</p>
          <Link
            href="/contact"
            className="inline-block bg-white text-primary px-8 py-3 rounded-md font-semibold hover:bg-gray-100 transition-colors"
          >
            立即咨询
          </Link>
        </div>
      </section>
    </div>
  );
}

// 添加隐藏滚动条的全局样式
const styles = `
  .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }
`;

// 将样式添加到 head 中
if (typeof document !== 'undefined') {
  const styleSheet = document.createElement('style');
  styleSheet.textContent = styles;
  document.head.appendChild(styleSheet);
}
